<template>
  <a-layout id="layout">
    <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
      <div class="logo" style>{{ collapsed ? "candy" : "糖&nbsp; 果" }}</div>
      <a-menu theme="dark" mode="inline" :default-selected-keys="[title]">
        <a-sub-menu key="sub1">
          <span slot="title">
            <a-icon type="mail" />
            <span>Navigation One</span>
          </span>
          <a-menu-item key="1">Option 1</a-menu-item>
          <a-menu-item key="2">Option 2</a-menu-item>
          <a-menu-item key="3">Option 3</a-menu-item>
          <a-menu-item key="4">Option 4</a-menu-item>
        </a-sub-menu>
        <a-menu-item key="数据驾驶舱">
          <router-link to="/">
            <a-icon type="home" />
            <span>数据驾驶舱</span>
          </router-link>
        </a-menu-item>
        <a-menu-item key="订单管理">
          <router-link to="/order">
            <a-icon type="menu" />
            <span>订单管理</span>
          </router-link>
        </a-menu-item>
        <a-menu-item key="价格管理">
          <router-link to="/price">
            <a-icon type="dollar" />
            <span>价格管理</span>
          </router-link>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header class="flex j-s" style="background: #fff; padding: 0">
        <a-icon
          class="trigger"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="() => (collapsed = !collapsed)"
        />
        <a-dropdown style="float:right;margin-right:25px">
          <a class="ant-dropdown-link" @click="e => e.preventDefault()">
            <a-icon type="user" />Candy
            <a-icon type="down" />
          </a>
          <a-menu slot="overlay">
            <a-menu-item>
              <a href="javascript:;"> <a-icon type="idcard" />个人中心 </a>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:;"> <a-icon type="tool" />修改密码 </a>
            </a-menu-item>
            <a-menu-item>
              <router-link to="/login">
                <a href="javascript:;"> <a-icon type="poweroff" />注销登录 </a>
              </router-link>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </a-layout-header>
      <!-- 表格内容 -->
      <a-layout-content
        class="right"
      >
        <a-breadcrumb style="margin:10px 0;">
          <a-breadcrumb-item>首页</a-breadcrumb-item>
          <a-breadcrumb-item>{{title}}</a-breadcrumb-item>
        </a-breadcrumb>
        <router-view></router-view>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script>


export default {
  data() {
    return {

      collapsed: false
    };
  },
  computed:{
    title(){
      return this.$route.meta.title;
    }
  }
};
</script>
<style scoped lang="scss">
#layout {
  height: 100vh;

  .trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;
  }
  #layout .trigger:hover {
    color: #1890ff;
  }
  .logo {
    height: 32px;
    color: #fff;
    text-align: center;
    line-height: 32px;
    background: rgba(255, 255, 255, 0.2);
    margin: 16px;
  }
  .right{
    margin: 24px 16px;
    padding: 24px;
    background: #fff;
    min-height: 280px;
  }
}
</style>
